<template>
	<!-- 商城订单 -->
	<view class="exchangeorderr_wp">
		<view class="my_gift_data" v-if="giftData.total!==null">今日购买礼包{{giftData.total}}个，今日礼包消费{{giftData.price}}元</view>
		<view class="order-item" v-for="item in list" :key="item.id" @click="$navTo('/pages/order/detailsx?id='+item.id)">
			<view class="order_info">
				<view class="flex_between">
					<view class="title clamp">订单号：{{item.ordersn}}<image src="/static/copy.png" style="width: 30rpx;height: 30rpx;" @click="copy(item.ordersn)"></image></view>
					<text class="o_status">{{item.statusstr}}</text>
				</view>
				<!-- <view class="order_name" v-if="item.addressname!==null">收货人：{{item.addressname}}</view> -->
			</view>
			<view class="goods_info" v-for="iitem in item.goods" :key="iitem.goodsid">
				<image class="goods-img" :src="iitem.thumb" mode="aspectFill"></image>
				<view class="right">
					<view class="sattus2 clamp">{{iitem.title}}</view>
					<view class="g_pay">{{iitem.optiontitle}}</view>
					<view class="g_pay" v-if="item.addressname!==null">收货人：{{item.addressname}}</view>
				</view>
				<view class="g_price">
					<text class="small">￥</text><text class="price">{{iitem.goodsprice}}</text>
					<view class="number">共{{iitem.total}}件</view>
				</view>
			</view>
			<view class="time">
				<view class="p_time p_daojishi" v-if="item.status==0&&item.lasttime>0"><uni-countdown :font-size="10" color="#AF141D" :show-hour="true" :show-day="false" :hour="hour(item.lasttime)" :minute="minute(item.lasttime)" :second="second(item.lasttime)"></uni-countdown>后订单取消</view>
				<text v-else class="p_time">{{item.paytime}}</text>
				<view>共计{{item.goodscount}}件商品 实付：<text class="small">￥</text><text class="price">{{item.price}}</text></view>
			</view>
			<view v-if="item.status==2" class="auto_take">剩余{{parseInt(item.lastfinishtime/60/60)}}小时自动确认收货</view>
			<view class="btns">
				<view class="border" v-if="item.status==-1" @click.stop="$navTo('/pages/product/product?id='+item.goods[0].goodsid)">再来一单</view>
				<view class="border" v-if="item.status==0" @click.stop="cancelOrder(item.id,idx)">取消订单</view>
				<view class="border" v-if="item.status==2" @click.stop="$navTo('/pages/order/detailsx?id='+item.id+'&isOpen=2')">查看物流</view>
				<view class="border" v-if="item.status==2" @click.stop="goodstap(item.id,idx)">确认收货</view>
				<view class="border" v-if="item.status==3" @click.stop="$navTo('/pages/order/evaluate?id='+item.id)">评价</view>
				<view class="bg" v-if="item.status==0" @click.stop="$navTo('/pages/money/pay?orderid=' + item.id)">立即支付</view>
			</view>
		</view>
		<view class="empty_loading">
			<image v-if="isloading" src="/static/business/loading.gif" ></image>
			<text v-if="ismore">到底了~</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'myorder',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			isloading: {
				type: Boolean,
				default: false
			},
			ismore: {
				type: Boolean,
				default: true
			},
			giftData: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				active: 1,
			}
		},
		methods: {
			second(v) {
				return Math.trunc(v % 60);
			},
			minute(v) {
				return Math.trunc(v / 60 % 60);
			},
			hour(v) {
				return Math.trunc(v / 60 / 60 % 24);
			},
			cancelOrder(v, idx) {
				this.$axios('Op/cancel', 'POST', 'order', {
					orderid: v
				}).then(res => {
					if (res.data.code == 200) {
						let list = [...this.list];
						list.splice(idx, 1);
						this.$emit('update:list', list);
						this.$api.msg('已取消订单！');
					}
				})
			},
			goodstap( orderid,idx) {
				var that = this;
				that.$axios('op/complete', "POST", 'order', {
					orderid:orderid
				}).then(res => {
					if (res.data.code == 200) {
						let list = [...this.list];
						list.splice(idx, 1);
						this.$emit('update:list', list);
						this.$api.msg('已确认收货！');
					}
				})
			},
			copy(val){
				uni.setClipboardData({
					data: val
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f2f2;
		color: $font-color-dark;
		padding-bottom: 130upx;
	}
	.auto_take{
		text-align: right;
		font-size: 24rpx;
		color: #666;
	}
	.my_gift_data{
		padding: 20rpx 22rpx 0;
		font-size: 24rpx;
		color: $bg-color;
	}
	.e_nav {
		background-color: #fff;
		display: flex;
		align-items: center;
		line-height: 100upx;
		position: fixed;
		width: 100%;
		z-index: 100;
	}

	.e_nav view {
		flex: 1;
		text-align: center;
		font-size: $font-base;
		position: relative;
	}

	.e_nav_active:after {
		content: '';
		border-bottom: 3px $base-color solid;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20upx;
		width: 40upx;
	}

	.e_list {
		overflow: hidden;
	}
	
	.order-item {
		background-color: #fff;
		border-radius: 10upx;
		margin: 20upx 20upx 0;
		padding: 20upx;
		.order_info{
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			font-weight: 600;
			border-bottom: 1rpx solid #E9E9E9;
			padding-bottom: 20rpx;
			.title{
				font-size: 28rpx;
				color: #333333;
			}
			.o_status{
				font-size: 24rpx;
				color: #8615E1;
			}
			.order_name{
				font-weight: normal;
				margin-top: 6rpx;
				font-size: 24rpx;
			}
		}
		.goods_info{
			align-items: center;
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
			image {
				border-radius: 10upx;
				height: 120upx;
				width: 120upx;
			}
			
			.right {
				padding-left: 20upx;
				line-height: 40upx;
				width: calc(100% - 280rpx);
			
				.sattus2 {
					font-size: 24rpx;
					color: #333333;
					flex: 1;
				}
				.g_pay{
					font-size: 20rpx;
					color: #999999;
				}
			}
			.g_price{
				color: #333;
				font-size: 26rpx;
				// font-weight: 600;
				width: 160rpx;
				text-align: right;
				white-space: nowrap;
				.small{
					font-size: 20rpx;
				}
				// .price{
				// 	text-decoration: line-through;
				// }
				.number{
					font-size: 20rpx;
					color: #999999;
					text-align: center;
					font-weight: 400;
				}
			}
		}
		.order_youhui{
			height: 54rpx;
			background: #FBF8FE;
			border-radius: 8rpx;
			align-items: center;
			display: flex;
			justify-content: space-between;
			font-size: 20rpx;
			color: #8615E1;
			padding: 0 20rpx;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 20rpx;
					margin-right: 10rpx;
					display: block;
				}
			}
		}
		.time{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;
			.p_time{
				font-size: 20rpx;
				color: #999999;
			}
			.p_daojishi{
				display: flex;
				align-items: center;
				color: #AF141D;
			}
			view{
				font-size: 20rpx;
				color: #333333;
				.small{
					color:#AF141D;
					font-weight: 600;
				}
				.price{
					font-size: 34rpx;
					color:#AF141D;
					font-weight: 600;
				}
			}
		}
		.btns{
			display: flex;
			justify-content: flex-end;
			margin-top: 16rpx;
			view{
				width: 122rpx;
				height: 46rpx;
				border-radius: 8rpx;
				border: 2rpx solid #9300EA;
				font-size: 24rpx;
				color: #8615E1;
				margin-left: 20rpx;
				line-height: 46rpx;
				text-align: center;
			}
			.long{
				width: auto;
				padding: 0 10rpx;
			}
			.bg{
				background: #8615E1;
				color: #FFFFFF;
			}
		}
	
	}
</style>